<template>
  <div id="adminNotice">
    <!-- 用户列表导航 -->
    <template>
      <div class="admin-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>公告管理</el-breadcrumb-item>
          <el-breadcrumb-item>教师公告管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>

    <!--视图 -->
    <el-card>
      <template>
        <el-row>
          <!-- 搜索信息 start-->
          <el-col :span="2">查询公告信息:</el-col>
          <!-- 搜索框-->
          <el-col :span="4">
            <el-input v-model="noticeId" class="selectNotice" placeholder="请输入公告标题"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button size="medium" type="primary" @click="selectNoticeById()">查询</el-button>
          </el-col>
          <!-- 搜索信息 end-->
        </el-row>
      </template>
      <!-- 公告详细信息 start-->
      <template>
        <div class="admin-table">
          <el-table :data="tableData">
            <el-table-column prop="noticeCollectionId" label="公告编号" width="120"></el-table-column>
            <el-table-column prop="collectionId" label="收集表ID"></el-table-column>
            <el-table-column prop="title" label="公告标题"></el-table-column>
            <!-- <el-table-column prop="content" label="公告内容"  ></el-table-column> -->
            <el-table-column label="公告内容" prop="content">
              <template slot-scope="scope">
                <div v-html="scope.row.content"></div>
              </template>
            </el-table-column>

            <el-table-column prop="createTime" label="公告发表时间"></el-table-column>
            <el-table-column>
              <el-button
                slot-scope="scope"
                size="medium"
                type="primary"
                @click="deleteNotice(scope.row.noticeCollectionId)"
              >删除</el-button>
            </el-table-column>
          </el-table>
          <!-- 公告详细信息 end-->
        </div>
        <!-- 分页区域 start-->
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="skipPage"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
        ></el-pagination>
        <!-- 分页区域 end-->
      </template>
    </el-card>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      noticeId: "",
      // 表格数据
      tableData: [],
      total: 0,
      pages: 0,
      pageSize: 8,
      currentPage: 1
      // 表格数据end
    };
  },
  created() {
    this.selectNotice();
  },
  methods: {
    // axios请求数据
    // 根据页码跳转
    skipPage: function(currentPage) {
      this.currentPage = currentPage;
      this.$get(
        this.$urlPath.notice +
          "/notice/noticeCollections/" +
          currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            this.tableData = resp.data.list;
            //  this.pages = resp.data.data.list.pages
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询公告数据
    selectNotice() {
      this
        // .get("/notice/noticeCollections/" + this.currentPage + "/" + this.pageSize)
        .$get(
          this.$urlPath.notice +
            "/notice/noticeCollections/" +
            this.currentPage +
            "/" +
            this.pageSize
        )
        .then(resp => {
          if (resp.code == 200) {
            this.tableData = resp.data.list;
            //  this.pages = resp.data.data.list.pages
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询公告数据end
    // 删除公告
    deleteNotice(id) {
      this
        // .delete("/notice/noticeCollection/delete/" + id, {
        .$deletes(
          this.$urlPath.notice + "/notice/noticeCollection/delete/" + id,
          {
            headers: { cicToken: "admin" }
          }
        )
        .then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            //  location.reload();
            this.reload();
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除公告end
    // 根据公告ID查询公告
    selectNoticeById() {
      this.$get(
        this.$urlPath.notice + "/notice/noticeCollection/" + this.noticeId
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data == null) {
              this.tableData = null;
              this.$message({
                message: "没有该公告",
                type: "error"
              });
            } else {
              this.tableData = [resp.data];
              this.total = 1;
              this.pageSize = 1;
            }
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    }
    // 根据公告ID查询公告end
    // 请求数据end
  }
};
</script>


<style lang="less" >
@import "../../assets/less/adminNotice.less";
</style>